<template>
  <div class="emaBox">
    <div class="setting-page">
      <!--<img src="/src/assets/settinyschool/find_head_url.jpg" alt class="find-head-img"/>-->
      <div class="find-navbar">EMA首页</div>

      <!--左侧预览区域-->
      <vuedraggable v-model="list" handle=".contentList" class="wrapper" animation="300">
        <transition-group>
          <div
            v-for="(item,index) in list"
            :key="index"
            :class="leftIndex === index ? 'border' : ''"
            class="contentList"
            @click="left_click(index)"
          >
            <!--删除按钮-->
            <div v-if="leftIndex === index" class="close" @click.stop @click="close(item.id)">
              <img src="../../../assets/settinyschool/delete.png" alt />
            </div>
            <!--图片广告左侧预览组件-->
            <imageAd v-if="item.type === 'image_ad'" :list="list" :left-index="index" />
            <bannerAd v-if="item.type === 'banner_ad'" :list="list" :left-index="index" />
            <course v-if="item.type === 'course'" :list="list" :left-index="index" />
            <class v-if="item.type === 'class'" :list="list" :left-index="index" />
            <hotAD v-if="item.type === 'hotAD'" :list="list" :left-index="index" />
            <navTab v-if="item.type === 'navTab'" :list="list" :left-index="index" />
          </div>
        </transition-group>
      </vuedraggable>
      <div class="multi-find-section find-section clearfix">
        <div class="section-title">基础组件</div>
        <div class="section-button-group clearfix">
          <el-button style="width:30%" @click="addImageAd()">轮播图</el-button>
          <el-button style="width:30%" @click="addCourse()">滑动课程</el-button>
          <el-button style="width:30%" @click="addClass()">推荐课程</el-button>
          <el-button style="width:30%" @click="addBannerAd()">图片广告</el-button>
          <el-button style="width:30%" @click="addHotAD()">热门推荐</el-button>
          <el-button style="width:30%" @click="addMembers()">导航菜单</el-button>
        </div>
      </div>
      <!-- 底部tab -->
      <div class="find-footer">
        <div class="find-footer-item active" style="width: 32%;">
          <i class="el-icon-magic-stick find-footer-item__icon"></i>
          <span class="find-footer-item__text">发现</span>
        </div>
        <div class="find-footer-item" style="width: 33%;">
          <i class="el-icon-reading find-footer-item__icon"></i>
          <span class="find-footer-item__text">学习</span>
        </div>
        <div class="find-footer-item" style="width: 32%;">
          <i class="el-icon-user find-footer-item__icon"></i>
          <span class="find-footer-item__text">我的</span>
        </div>
      </div>
    </div>
    <el-button type="primary" class="saveBtn" @click="addAssembly">保存</el-button>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import ImageAd from './ema/imageAd'
import BannerAd from './ema/bannerAd'
import Course from './ema/courseList'
import Class from './ema/classList'
import HotAD from './ema/hotAD'
import navTab from './ema/navtab'

import { batchSave, list, del, delImage } from '@/api/system/mobile_assembly'
import { getTenantId } from '@/utils/auth'

export default {
  components: {
    vuedraggable,
    ImageAd,
    BannerAd,
    Course,
    Class,
    HotAD,
    navTab
  },
  data() {
    return {
      leftIndex: 0,
      list: []
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    left_click(index) {
      console.log(index)
      var that = this
      that.leftIndex = index
      for (let i = 0; i < that.list.length; i++) {
        that.list[i].showRight = false
        this.$set(that.list, i, that.list[i])
      }
      // this.$set(that.list,that.list)
      that.list[that.leftIndex].showRight = true
      console.log(that.list)
    },
    getListData() {
      list(getTenantId(), 'r').then(response => {
        console.log(response.data.items)
        this.list = response.data.items
        this.list.map(item => {
          if (item.type === 'coupon') item.couponInfo = []
          if (item.type === 'assemble') item.assembleInfo = []
          if (item.type === 'bargain') item.bargainInfo = []
          if (item.type === 'seckill') item.seckillInfo = []
        })
      })
    },
    traverseList() {
      var that = this
      this.leftIndex = that.list.length - 1
      for (let i = 0; i < that.list.length; i++) {
        that.list[i].showRight = false
        this.$set(that.list, i, that.list[i])
      }
      that.list[that.leftIndex].showRight = true
    },
    addImageAd() {
      var that = this
      that.list.push({
        cardRight: 1,
        type: 'image_ad',
        modelType: 'r',
        showRight: true,
        tenantId: getTenantId(),
        images: [
          {
            url: require('../../../assets/editapp/banner.png'),
          }
        ]
      })
      this.traverseList()
    },
    addBannerAd() {
      var that = this
      that.list.push({
        cardRight: 2,
        type: 'banner_ad',
        modelType: 'r',
        showRight: true,
        tenantId: getTenantId(),
        images: [
          {
            url: require('../../../assets/editapp/banner5.png'),
            linkRadio: 'instationLink',
            link: '',
            customLink: '',
            selfAdaption: 'yes'
          }
        ]
      })
      this.traverseList()
    },
    addCourse() {
      var that = this
      that.list.push({
        cardRight: 3,
        type: 'course',
        modelType: 'r',
        showRight: true,
        courseType: '',
        recentDay: '',
        limit: 2,
        tenantId: getTenantId(),
        courseList: [
          {
            url: require('../../../assets/editapp/img1.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            money: '￥299',
            sale: '20'
          },
           {
            url: require('../../../assets/editapp/img1.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            money: '￥299',
            sale: '20'
          },
           {
            url: require('../../../assets/editapp/img1.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            money: '￥299',
            sale: '20'
          },
           {
            url: require('../../../assets/editapp/img1.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            money: '￥299',
            sale: '20'
          },
           {
            url: require('../../../assets/editapp/img1.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            money: '￥299',
            sale: '20'
          },
        ]
      })
      this.traverseList()
    },
    addClass() {
      var that = this
      that.list.push({
        cardRight: 4,
        type: 'class',
        modelType: 'r',
        showRight: true,
        courseType: 'all',
        recentDay: '',
        limit: 2,
        title: '为您推荐',
        // courseTab: [],
        tenantId: getTenantId(),
        courseList: [
          {
            url: require('../../../assets/editapp/img2.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '1351人学过',
            money: '￥399',
          },
           {
            url: require('../../../assets/editapp/img2.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '1351人学过',
            money: '￥399',
          },
           {
            url: require('../../../assets/editapp/img2.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '1351人学过',
            money: '￥399',
          },
           {
            url: require('../../../assets/editapp/img2.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '1351人学过',
            money: '￥399',
          },
        ]
      })
      this.traverseList()
    },
    addHotAD() {
      var that = this
      that.list.push({
        cardRight: 5,
        type: 'hotAD',
        modelType: 'r',
        showRight: true,
        tenantId: getTenantId(),
        images: [
          {
            url: require('../../../assets/editapp/banner2.png'),
            linkRadio: 'instationLink',
            link: '',
            customLink: ''
          },
          {
            url: require('../../../assets/editapp/banner3.png'),
            linkRadio: 'instationLink',
            link: '',
            customLink: ''
          },
          {
            url: require('../../../assets/editapp/banner4.png'),

            linkRadio: 'instationLink',
            link: '',
            customLink: ''
          }
        ]
      })
      this.traverseList()
    },
    addMembers() {
      var that = this
      that.list.push({
        cardRight: 1,
        type: 'navTab',
        modelType: 'r',
        showRight: true,
        tenantId: getTenantId(),
        tabList: [
          {
            url: require('../../../assets/editapp/ic_course.png'),
            link: 'www.baidu.com',
            title: '课程'
          },
            {
            url: require('../../../assets/editapp/ic_book.png'),
            link: 'www.baidu.com',
            title: '图书'
          },
            {
            url: require('../../../assets/editapp/ic_pen.png'),
            link: 'www.baidu.com',
            title: '文具'
          },
            {
            url: require('../../../assets/editapp/ic_Toys.png'),
            link: 'www.baidu.com',
            title: '玩具'
          },
        ]
      })
      this.traverseList()
    },

    // 删除列表
    close(id) {
      console.log(id)
      if (id) {
        del(id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.list.splice(this.leftIndex, 1)
        })
      } else {
        this.list.splice(this.leftIndex, 1)
      }
    },
    addAssembly() {
      batchSave(this.list).then(() => {
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        })
        this.getListData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.emaBox {
.setting-page {
  position: relative;
  margin: 0 20px 20px;
  padding-bottom: 310px;
  width: 375px;
  min-height: 667px;
  box-sizing: border-box;
  border: 1px solid #e1e1e1;

  .find-head-img {
    width: 373px;
    vertical-align: top;
  }

  .find-navbar {
    position: relative;
    background-color: #212121;
    text-align: center;
    line-height: 56px;
    color: #fff;
    width: 374px;
    font-size: 18px;
    margin-left: -1px;
    margin-right: -1px;
  }

  .multi-find-section {
    background: #fff;
    padding: 0;

    .section-title {
      margin-left: 0;
      padding: 0 15px;
      background: #f5f5f5;
      line-height: 38px;
    }

    .section-button-group {
      padding: 7.5px 0 7.5px 15px;

      button {
        margin: 6px 2px;
      }
    }
  }

  .find-section {
    position: absolute;
    bottom: 50px;
    box-sizing: border-box;
    width: 373px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    font-size: 14px;
  }

  // 底部样式
  .find-footer {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e1e1e1;

    .find-footer-item {
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
      padding: 5px 0;
      font-size: 12px;
      color: #929292;
      text-align: center;

      .find-footer-item__icon {
        font-size: 26px;
      }

      .find-footer-item__text {
        display: block;
        text-align: center;
        line-height: 20px;
      }
    }

    .find-footer-item.active {
      color: #408ffb;
    }
  }
}

.contentList {
  border: 1px solid rgba($color: #fff, $alpha: 0);
  box-sizing: border-box;
  position: relative;

  .close {
    z-index: 3;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;

    img {
      width: 100%;
    }
  }
}

.contentList:hover {
  border: 1px solid #408ffb;
}

.border {
  border: 1px dotted #408ffb;
}

.saveBtn {
  margin-bottom: 310px;
  margin-left: 40px;
}
}

</style>
